<div class="modal fade rule-edit-modal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" (click)="tabActive()" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" *ngIf="admin.id">编辑用户</h4>
        <h4 class="modal-title" *ngIf="!admin.id">新增用户</h4>
      </div>
      <div class="modal-body">

        <!-- Custom Tabs -->
        <div class="nav-tabs-custom">

          <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
              <form class="form-horizontal" #editForm="ngForm">

                <div class="box-body">
                  <div class="form-group" [class.has-error]="username.valid ===false&&(username.dirty || username.touched)">
                    <label class="col-sm-3 control-label">名称</label>
                    <div class="col-sm-8">
                      <input type="text" pattern="^[A-Za-z0-9_\u4e00-\u9fa5]+$" minlength="4" maxlength="12" #username="ngModel" required [(ngModel)]="admin.username"
                        name="username" class="form-control" placeholder="请输入由英文字母、数字、汉字、下划线组成的4-12位字符">
                      <!-- <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
                        名称不允许为空！
                      </div> -->
                    </div>

                  </div>
                  <div class="form-group" [class.has-error]="password.valid === false&&(password.dirty || password.touched)">
                    <label class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-8">
                      <input type="text" pattern="^[A-Za-z0-9]+$" minlength="6" maxlength="10" #password="ngModel" required [(ngModel)]="admin.password" name="password"
                        class="form-control" placeholder="请输入6-10位的由字母数字组成的字符">
                    </div>
                  </div>
                  <div class="form-group" [class.has-error]="email.valid === false&&(email.dirty || email.touched)">
                    <label class="col-sm-3 control-label">邮箱</label>
                    <div class="col-sm-8">
                      <input type="text" #email="ngModel" maxlength="20"  required [(ngModel)]="admin.email" name="email" class="form-control" placeholder="请输入正确格式的邮箱"
                        email/>

                    </div>
                  </div>
                  <div class="form-group" [class.has-error]="mobile.valid === false&&(mobile.dirty || mobile.touched)">
                    <label class="col-sm-3 control-label">手机号</label>
                    <div class="col-sm-8">
                      <input type="text" pattern="^1[3|4|5|7|8][0-9]{9}$" #mobile="ngModel" required [(ngModel)]="admin.mobile" name="mobile" class="form-control"
                        placeholder="请输入真实的手机号" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">是否启用</label>
                    <div class="col-sm-8">
                      <select class="form-control" [(ngModel)]="admin.active" name="active">
                                    <option value="true">启用</option>
                                    <option value="false">停止</option>
                                </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">角色</label>
                    <div class="col-sm-8">
                      <select class="form-control" [(ngModel)]="admin.role" name="role">
                                    <option value="admin">admin</option>
                                    <option value="user">user</option>
                                </select>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <!-- /.tab-pane -->

            <!-- /.tab-pane -->
            <!-- <div class="tab-pane" id="tab_3">

            </div> -->
            <!-- /.tab-pane -->
          </div>
          <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
        <button type="button" id="save_btn" (click)="createOrUpdate()" [disabled]="!editForm.form.valid" class="btn btn-primary">保存</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->